<template>
  <div :class="{'mobile-cost-select': showMobilePage}">
    <div v-if="stepOneData.supplierId" class="list-container">
      <DetailTabs v-if="isinit" v-model="costBelong" :max-badge="{ num: 10000, str: '1w', unit: '+' }" :tabs="costBelongOptions" show-zero @tabClick="handleTabClick" />
    </div>
    <div v-loading="loading" class="cost-list">
      <template v-if="costList && costList.length">
        <div v-for="item in costList" :key="item.id" :class="{'isCheck':item.check}" class="cost-item">
          <div v-if="!showMobilePage" class="cost-icon">
            <img :src="getImage(item.id)" alt="">
          </div>
          <div class="content">
            <div class="title">{{ item.name }}</div>
            <div :class="{ 'num-active': item.costOrder > 0 || item.costNum > 0 }" class="num" style="display:flex;flex-wrap:wrap;">
              <div style="margin-right:10px;">订单: <span class="num-lable">{{ item.costOrder }}</span></div>
              <div>成本: <span class="num-lable">{{ item.costNum || 0 }}</span></div>
            </div>
            <el-tooltip v-if="item.remark && item.remark.length > 18" placement="top">
              <div slot="content" style="max-width: 260px; line-height: 18px;">{{ item.remark }}</div>
              <div class="remark">{{ item.remark }}</div>
            </el-tooltip>
            <div v-else class="remark">{{ item.remark || `暂无${item.name}的简介` }}</div>
          </div>
          <div v-if="(item.costOrder || item.costNum || isInvite)" class="btn-box">
            <div :class="{'isCheck': item.check, 'disabled': item.costOrder === 0 && !item.costNum && !isInvite }" class="btn" @click="selectCost(item)">
              {{ item.check?'已选择':'请选择' }}
            </div>
          </div>
        </div>
      </template>
      <EmptyPlaceholder v-else :empty-img="emptyIcon" :text="stepOneData.supplierId?'该成本来源暂无成本项':'请先选择要结算的供应商'" style="margin-top: 20px" image-size="120px" />
    </div>
    <fixed-pagination>
      <div class="center">
        <el-button
          v-if="hasRouteAuth('medium:supplierAudit:launch') ||
            hasRouteAuth('medium:supplierAudit:departAll') ||
          hasRouteAuth('medium:supplierAudit:all')"
          :disabled="process !== 0"
          size="small"
          class="mobile-btn-flex"
          type="primary"
          @click="nextStep" >下一步</el-button>
        <back-btn text="返回列表" />
      </div>
    </fixed-pagination>
  </div>
</template>

<script>
/**
 * 付款申请第一步骤：成本选择
 */
// utils
import ElMessage from '@/utils/message';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
// api
import { getSupplierCost, costBelongNums } from '@/api/supplier';
// components
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import DetailTabs from '@/components/Common/baseComponent/DetailTabs';
import BackBtn from '@/components/SupplierComponent/module/backBtn';
// img
import serviceCostIcon from '@/assets/settlement/service_cost_icon.png';
import channelCostIcon from '@/assets/settlement/channel_cost_icon.png';
import expertCostIcon from '@/assets/settlement/expert_cost_icon.png';
import serviceTwoCostIcon from '@/assets/settlement/service_two_cost_icon.png';
import starMapIcon from '@/assets/settlement/star_map_icon.png';
import fansIcon from '@/assets/settlement/fans_icon.png';
import douCostIcon from '@/assets/settlement/dou_cost_icon.png';
import mircTaskIcon from '@/assets/settlement/mirc_task_icon.png';
import diyIcon from '@/assets/settlement/diy_icon.png';
import emptyIcon from '@/assets/empty-table-data.png';
export default {
  components: { BackBtn, EmptyPlaceholder, DetailTabs },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Number,
      default: 0
    },
    process: {
      type: Number,
      default: 1
    },
    stepOneData: {
      type: Object,
      default: () => {
        return {
          pageFrom: null,
          supplierId: 0
        };
      }
    }
  },
  data() {
    return {
      emptyIcon,
      loading: false,
      serviceCostIcon,
      channelCostIcon,
      expertCostIcon,
      serviceTwoCostIcon,
      diyIcon,
      starMapIcon,
      fansIcon,
      douCostIcon,
      mircTaskIcon,
      isinit: false,
      costList: [
        // { id: 1, name: '外渠道成本', costOrder: 10, remark: '' },
        // { id: 2, name: '达人成本', costOrder: 0, remark: '备注' },
        // { id: 3, name: '其他服务费1未税', costOrder: 22, remark: '' },
        // { id: 4, name: '其他服务费2未税', costOrder: 33, remark: '' }
      ]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    costBelong: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('change', val);
      }
    },
    costBelongOptions() {
      let arr = [
        { id: 0, name: '渠道订单', num: 0 },
        { id: 1, name: '项目订单', num: 0 },
        { id: 2, name: '商务订单', num: 0 },
        { id: 3, name: '营销授权', num: 0 },
        { id: 5, name: '项目渠道单', num: 0 }
      ];
      if (this.stepOneData.pageFrom === 'saleSupplier') { // 销售供应商列表
        arr = [{ id: 0, name: '渠道订单', num: 0 }, { id: 1, name: '项目订单', num: 0 }, { id: 5, name: '项目渠道单', num: 0 }];
      }
      if (this.stepOneData.pageFrom === 'mengliSupplier') { // 萌力供应商列表
        arr = [
          { id: 2, name: '商务订单', num: 0 }
          // { id: 3, name: '营销授权', num: 0 }
        ];
      }
      return arr;
    },
    isInvite() {
      return !!this.stepOneData.isInvite;
    }
  },
  created() {
    if (this.stepOneData.supplierId) this.getCostNums();
  },
  methods: {
    hasRouteAuth,
    getCostNums() {
      this.loading = true;
      costBelongNums({ id: this.stepOneData.supplierId }).then(res => {
        if (res.code && res.data.length) {
          let isInitCostBelong = false;
          const costBelongIds = this.costBelongOptions.map(i => i.id);
          this.costBelongOptions.forEach(i => {
            const item = res.data.find(j => j.costBelong === i.id);
            if (item) {
              this.$set(i, 'num', item.num);
            }
            if (i.num > 0 && !isInitCostBelong && !costBelongIds.includes(this.costBelong)) {
              this.costBelong = i.id; // 默认选择第一个数值大于0的成本来源
              isInitCostBelong = true;
            }
          });
          this.isinit = true;
          this.$nextTick(() => {
            this.getCost();
          });
        } else {
          this.getCost();
        }
      }).catch(() => {
        this.isinit = true;
        this.getCost();
      });
    },
    getCost() {
      this.loading = true;
      const params = {
        id: this.stepOneData.supplierId,
        costBelong: this.costBelong || 0
      };
      if (this.$route.query.settleId) {
        params.settleId = this.$route.query.settleId;
      }
      if (this.isInvite) {
        params.isInvite = true;
      }
      getSupplierCost(params).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.costList = res.data;
          this.setSelectedCost();
        }
      });
    },
    setSelectedCost() {
      const selectCost = this.stepOneData.selectCost || [];
      if (selectCost.length) {
        const ids = selectCost.map(i => i.id);
        this.costList.forEach(it => {
          if (ids.includes(it.id)) {
            it.check = true;
          }
        });
      }
    },
    handleTabClick(val) {
      this.$nextTick(() => {
        this.getCost();
      });
    },
    selectCost(item) {
      this.$set(item, 'check', !item.check);
      this.$forceUpdate();
    },
    nextStep() {
      this.$emit('settleInfoValid');
    },
    launchDialog() {
      const selectCostList = [];
      let costOrder = 0;
      let costNum = 0;
      this.costList.forEach(i => {
        if (i.check) {
          selectCostList.push(i);
          costOrder += i.costOrder;
          costNum += i.costNum;
        }
      });
      if (selectCostList.length === 0) {
        ElMessage.error('请选择成本');
        return;
      }
      const costIds = selectCostList.map(it => it.id);
      this.$emit('saveCostIds', costIds);
      if (costOrder === 0 && costNum === 0) {
        this.$confirm('当前成本结算没有符合要求的订单或者成本，是否继续？', '', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning',
          lockScroll: false,
          center: true,
          customClass: 'del-message del-message-cancel',
          iconClass: 'del-icon'
        }).then(() => {
          this.$emit('costSelectCallback', selectCostList, costOrder, costNum);
        }).catch(() => {});
      } else {
        this.$emit('costSelectCallback', selectCostList);
      }
    },
    getImage(id) {
      switch (id) {
        case 1:
          return this.channelCostIcon;
        case 2:
          return this.expertCostIcon;
        case 3:
          return this.serviceCostIcon;
        case 4:
          return this.serviceTwoCostIcon;
        case 5:
          return this.starMapIcon;
        case 6:
          return this.fansIcon;
        case 7:
          return this.douCostIcon;
        case 8:
          return this.mircTaskIcon;
        default:
          return this.diyIcon;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.operate-btn {
  margin-bottom: 24px;
}
.list-container {
  margin-bottom: 10px;
  padding: 0 24px;
}
.cost-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 24px 55px 24px;
  .cost-icon {
    margin-right: 12px;
    img {
      width: 48px;
      height: 48px;
    }
  }
  .cost-item {
    display: flex;
    align-items: center;
    width: 31%;
    height: 140px;
    margin-right: 20px;
    padding: 0 22px 0 20px;
    border: 1px solid #E6EDFF;
    margin-bottom: 10px;
    font-size: 14px;
    border-radius: 4px;
    &.isCheck {
      background: #FAFBFF;
    }
    .btn-box {
      height: 100%;
      display: flex;
      align-items: center;
    }
    .btn {
      height: 30px;
      // width: 100%;
      // width: 100%;
      width: 120px;
      margin-left: 19px;
      line-height: 30px;
      text-align: center;
      background-color: #406EFF;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      color: #ffffff;
      &.isCheck {
        opacity: 0.31;
      }
       &.disabled {
        cursor: not-allowed;
        opacity: 0.4;
      }
    }
  }
  .cost-item:nth-child(3n) {
    margin-right: 0;
  }
}
.content {
  flex: 1;
  .title {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 14px;
  }
  .num {
    color: #999;
    font-size: 14px;
    margin-bottom: 8px;
    .num-lable {
      color: #999999;
      font-size: 16px;
    }
    &.num-active {
      .num-lable {
        color: #5F77C3;
        font-family: DIN Alternate, DIN Alternate-Bold;
      }
    }
  }
  .remark {
    font-size: 14px;
    color: #999;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.4;
  }
}
@media screen and (max-width: 1499px) {
  .cost-list {
    .cost-icon {
      margin-right: 8px;
      img {
        width: 40px;
        height: 40px;
      }
    }
    .cost-item {
      padding: 0 17px 0 15px;
      .btn {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 4px;
      }
    }
  }
}
.mobile-cost-select {
  .list-container {
    padding: 0 12px;
  }
  .cost-list {
    justify-content: space-between;
    padding: 0 12px;
    .cost-item {
      flex-direction: column;
      align-items: flex-start;
      width: 160px;
      height: 200px;
      margin-right: 0;
      .content {
        padding-top: 6px;
      }
      .btn-box  {
        height: unset;
        margin-bottom: 12px;
      }
    }
  }
}
</style>
